
<template>
  <plain-page
    style="
      width: 700px;
      margin: 0px auto;"
  >
    <el-card header="安全" shadow="never">
      <el-row>
        <el-col :span="7">记住密码</el-col>
        <el-col :span="17">
          <el-switch
            v-model="rememberPasswordEnabled"
            @change="onRememberPasswordChange" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">自动登陆</el-col>
        <el-col :span="17">
          <el-switch
            v-model="autoLoginEnabled"
            @change="onAutoLoginChange" />
        </el-col>
      </el-row>
    </el-card>
    <el-card header="功能" shadow="never">
      <el-row>
        <el-col :span="7">启动时导航菜单默认展开</el-col>
        <el-col :span="17">
          <el-switch v-model="navMenuExpanded" @change="onChange('navMenuExpanded', $event)" />
        </el-col>
      </el-row>
      <el-row v-auth="'/home/taishitu'">
        <el-col :span="7">启动时态势图自动打开</el-col>
        <el-col :span="17">
          <el-switch
            v-model="autoOpenStatEnabled"
            @change="onChange('autoOpenStatEnabled', $event)"
          />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">在顶部显示时间</el-col>
        <el-col :span="17">
          <el-switch v-model="timeShow" @change="onChange('timeShow', $event)" />
        </el-col>
      </el-row>
    </el-card>
    <el-card header="数据表格" shadow="never" class="nest-card">
      <el-card
        shadow="never"
        class="inner-card"
        body-style="padding-top: 10px;padding-bottom: 0px;"
      >
        <el-row>
          <el-col :span="7">所有表格显示查询时间</el-col>
          <el-col :span="17">
            <el-switch
              v-model="datatable.timingForce"
              @change="onChange('datatable.timingForce', $event)"
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">斑马纹</el-col>
          <el-col :span="17">
            <el-switch
              v-model="datatable.stripe"
              @change="onChange('datatable.stripe', $event)"
            />
          </el-col>
        </el-row>
      </el-card>
      <el-card header="分页器全局默认设置" shadow="never" class="inner-card">
        <el-row>
          <el-col :span="7">分页器位置</el-col>
          <el-col :span="17">
            <el-radio-group
              v-model="datatable.pagination.position"
              @change="onChange('datatable.pagination.position', $event)"
            >
              <el-radio label="left">左边</el-radio>
              <el-radio label="right">右边</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">分页器部件</el-col>
          <el-col :span="17">
            <el-select
              v-model="datatable.pagination.layout"
              multiple
              style="width:450px"
              @change="onChange('datatable.pagination.layout', $event)">
              <el-option
                v-for="c in [
                  {key: 'total', label: '总数'},
                  {key: 'prev', label: '上一页'},
                  {key: 'pager', label: '页码'},
                  {key: 'next', label: '下一页'},
                  {key: 'jumper', label: '跳转页码'},
                  {key: 'sizes', label: '条数选择器'}
                ]"
                :key="c.key"
                :label="c.label"
                :value="c.key" />
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">最大页码按钮数</el-col>
          <el-col :span="17">
            <el-input-number
              v-model="datatable.pagination.pagerCount"
              :disabled="!datatable.pagination.layout.includes('pager')"
              :precision="0"
              controls-position="right"
              :min="2"
              :max="15"
              style="width: 90px"
              @change="onChange('datatable.pagination.pagerCount', $event)"
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">每页条数</el-col>
          <el-col :span="17">
            <el-input-number
              v-model="datatable.pagination.pageSize"
              :precision="0"
              controls-position="right"
              :min="1"
              :max="100"
              style="width: 90px"
              @change="onChange('datatable.pagination.pageSize', $event)"
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">分页按钮背景色</el-col>
          <el-col :span="17">
            <el-switch
              v-model="datatable.pagination.background"
              @change="onChange('datatable.pagination.background', $event)"
            />
          </el-col>
        </el-row>
      </el-card>
    </el-card>
    <confirm-button
      type="warning"
      plain
      icon="el-icon-refresh-left"
      style="display:block;margin: 16px 0px 32px 0px;float:right;"
      @ok="onRestoreClick"
    >
      <p slot="content">确定重置吗？</p>
      重置
    </confirm-button>
  </plain-page>
</template>


<script>
import config from '@/config/app.config';
import Vue from 'vue';

export default {
  pageProps: {
    title: '设置'
  },
  data() {
    return {
      ...config.getAllValues(),
    };
  },
  watch: {
    timeShow(show) {
      app.$refs.homeHeader.timeShow = show;
    }
  },
  methods: {
    onAutoLoginChange(checked) {
      config.set('autoLoginEnabled', checked);
      if (checked) {
        this.rememberPasswordEnabled = true;
        config.set('rememberPasswordEnabled', true);
      }
    },
    onRememberPasswordChange(checked) {
      config.set('rememberPasswordEnabled', checked);
      if (!checked) {
        this.autoLoginEnabled = false;
        config.set('autoLoginEnabled', false);
        config.set('password', '');
      }
    },
    onChange(key, value) {
      config.set(key, value);
    },
    onRestoreClick() {
      const username = config.get('username');
      config.restore();
      config.set('username', username);
      Object.assign(this.$data, config.getAllValues());
      this.$message.success('重置成功');
    }
  }
}
</script>

<style scoped>
.page > .el-card {
  margin-bottom: 4px;
}
>>> .el-card__header {
  padding: 10px 20px;
}
>>> .el-card__body {
  padding: 5px 20px;
}
.el-row {
  font-size: 14px;
  line-height: 40px;
}
.el-col-7 {
  padding-right: 24px;
  text-align: right;
  vertical-align: middle;
  color: #606266;
}
.el-divider--horizontal {
  margin: 10px 0;
}
.nest-card >>> .el-card__body {
  padding: 0px 10px 5px 10px;
}
.inner-card {
  border: none;
}
.inner-card >>> .el-card__header {
  position: relative;
  left: 16px;
  border-bottom: none;
  padding-bottom: 0px;
}
.inner-card >>> .el-card__body {
  padding: 5px 10px 5px 10px;
}
.info {
  margin-left: 8px;
  color: #909399;
}
</style>